{% extends "static/view/template.html" %}
{% block body %}
<link href="css/task_analyzer.css" rel="stylesheet" type="text/css">

<div id="app">
    <div id="wrapper" class="toggled">
        <div id="sidebar-wrapper">
            <ul class="sidebar-nav">
              <li>&nbsp</li>
              <li class="sidebar-brand"><a href="#">Task List</a></li>
              <li v-for="task in taskList | filterBy taskFilter" :class="[task==currentTask?'active':'']" @click="setcurrentTask(task)">
                {{task}}
              </li>
            </ul>
        </div>
        <div id="page-content-wrapper" >
            <div class="container-fluid">
                    <div class="page-header">
                    </div>

                    <div class="page-header">
                        <h1> <font color= #333333><center>Task Analyzer</center></font>
                        </h1>
                    </div>
                    
                    <div class="page-header">
                            <h4>Current Task: &nbsp <span class="label label-success">{{currentTask}}</span></h4>
                            <input placeholder="Filtering task display.." v-model="taskFilter" v-if="if_collapsed == false">
                    </div>
                    <div class="row">
                        <div class="col-xs-6">
                            <button class="btn btn-info dropdown-toggle" @click="collapse">
                                <div v-if="if_collapsed">>></div>
                                <div v-else><<</div>
                            </button>
                            <button class="btn btn-primary dropdown-toggle" data-toggle="collapse" data-target="#call">Caller/Callee tasks</button>
	                        <button class="btn btn-success dropdown-toggle" data-toggle="collapse" data-target="#linkgraph" v-if="sankeyLinks.length>0">Call link graph</button>
	                        <button class="btn btn-danger" v-else>No call link</button>
	                        <button class="btn btn-primary dropdown-toggle" data-toggle="collapse" data-target="#sharer" >Tasks sharing the same threads</button>
	                        <button class="btn btn-info" @click="setcurrentTask(lastTask)" data-toggle="tooltip bottom" title="Back to last task"><</button>
                        </div>
                        <div class="col-xs-3">
                            <input placeholder="Link to machineName:port"
                                   v-model="remoteMachine"
                                   v-if="drawType == 'Distribution' || drawType == 'Breakdown'" 
                                   size="30"
                                   @keyup.enter="linkRemoteMachine"
                                   data-toggle="tooltip bottom" title="For tasks across machines, we can only get half data on one side (server/client), so you need to fill in the webstudio address of another machine to combine them">
                        </div>
                        <div class="col-xs-3">
                            <button class="btn dropdown-toggle" :class="[drawType=='Distribution'?'btn-warning':'']" @click="setdrawType('Distribution')">Distribution</button>
                            <button class="btn dropdown-toggle" :class="[drawType=='Realtime'?'btn-warning':'']" @click="setdrawType('Realtime')">Realtime</button>
                            <button class="btn dropdown-toggle" :class="[drawType=='Breakdown'?'btn-warning':'']" @click="setdrawType('Breakdown')">Breakdown</button>
                        </div>
                    </div>
                    
                    
                    <div id="call" class="collapse">
                        <div class="row">
                            <div class="col-xs-6">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Callers</th>
                                            <th># of calls</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="caller in caller_list">
                                            <td><a @click="setcurrentTask(caller.name)">{{caller.name}}</a></td>
                                            <td>{{caller.num}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="col-xs-6">
                                <table class="table table-striped">
                                    <thead>
                                        <tr>
                                            <th>Callees</th>
                                            <th># of calls</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="callee in callee_list">
                                            <td><a @click="setcurrentTask(callee.name)">{{callee.name}}</a></td>
                                            <td>{{callee.num}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div id="linkgraph" class="collapse">
                            <div id="chart_dep"></div>
                        </div>	
                    </div>
                    <div id="sharer" class="collapse">
                        <ul>
                            <li class="list-group-item" v-for="sharer in sharer_list"><a @click="setcurrentTask(sharer)">{{sharer}}</a></li>
                        </ul>
                    </div>
                
                    <div id="c3_chart">
                        <div id="chart"></div>
                    </div>

                    <div class="btn-group">
	                    <button class="btn btn-primary dropdown-toggle" data-toggle="collapse" data-target="#pic" data-toggle="tooltip" title="A help graph for RPC">Show help graph</button>
                    </div>

                    <div id="pic" class="collapse">
                        <center><img src="img/helpgraph.jpg" class="img-rounded" alt="Cinque Terre" width="650" height="425"></center>
                    </div>
            </div>
        </div>
    </div>
</div>

<script src="js/bihisankey.js"></script>
<script src="js/sankey_d3.js"></script>
<script src="js/vue.js"></script>
<script src="js/task_analyzer.js"></script>
{% endblock %}
